<template>
  <div class="margin-container-list radius-container">
    <div class="pad-10 font-w font-15 topbar-style">
      <el-tabs v-model="activeMember" @tab-click="handleClick">
        <template v-if="taskStatus == '60' || taskStatus == '70' || taskStatus == '80'">
          <el-tab-pane label="支付记录" name="first"></el-tab-pane>
        </template>
        <el-tab-pane label="岗位列表" name="second"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="table-container" v-if="!taskMemberStatus">
      <el-table :data="taskPositionList" @sort-change="sortChange" @selection-change="handleSelectionChange"
                v-loading="listLoading" element-loading-text="加载中"
                style="width: 100%">
        <el-table-column width="135px" label="招募岗位" prop="positionName">
        </el-table-column>
        <el-table-column width="135px" label="岗位酬金" prop="positionCommission">
        </el-table-column>
        <el-table-column width="135px" label="工作预估周期" prop="positionCommission">
        </el-table-column>
        <el-table-column width="135px" label="工作描述" prop="positionDescription">
        </el-table-column>
        <el-table-column width="135px" label="录用人数" prop="hireNum">
        </el-table-column>
        <el-table-column width="135px" label="报名人数" prop="enrolmentNum">
        </el-table-column>
        <el-table-column width="135px" label="已录用" prop="hiredNum">
        </el-table-column>
        <el-table-column width="135px" label="已签约" prop="signingNum">
        </el-table-column>
        <el-table-column min-width="260px" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleDetails(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 列表分页 -->
    <div class="pagination" v-if="!taskMemberStatus">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="taskPositionListQuery.currentPage"
                     :page-sizes="[10, 20, 50, 100]" :page-size="taskPositionListQuery.size"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </div>
    <div class="pad-20" v-if="taskMemberStatus">
      <task-commission :taskId="taskId" :taskStatus="taskStatus" :taskType="taskType"></task-commission>
    </div>
  </div>
</template>

<style scoped>

</style>

<script>
  import { pageTaskPosition, deleteTaskPosition } from '@/api/project/taskPosition'
  import TaskCommission from '@/components/Project/TaskCommission'
  // 任务岗位列表
  export default {
    components: {
      TaskCommission
    },
    props: {
      //  任务id
      taskId: {
        type: String
      },
      //  任务状态   1、未发布 2、平台审核中 3、报名众 4、待签约 5、进行中 6、已完成 7、已中止
      taskStatus: {
        type: String
      },
      taskType: {
        type: String
      }
    },
    data() {
      return {
        taskPositionList: [],
        total: null,
        listLoading: true,
        taskMemberStatus: true,
        activeMember: 'first',
        multipleSelection: [],
        taskPositionListQuery: {
          currentPage: 1,
          size: 10,
          taskId: ''
        },
        taskPosition: {
          positionId: '',
          taskId: '',
          positionName: '',
          hireNum: '',
          positionCommission: '',
          positionDescription: '',
          enrolmentNum: '',
          hiredNum: '',
          signingNum: '',
          taskStatus: ''
        }
      }
    },
    // 过滤器
    filters: {
      statusFilter(status) {
        const statusMap = {
          1: 'success',
          2: 'danger'
        }
        return statusMap[status]
      }
    },
    // 初始化页面
    created() {
    },
    methods: {
      initTaskPositionList() {
        this.listLoading = true
        this.taskPositionListQuery.taskId = this.taskId
        pageTaskPosition(this.taskPositionListQuery).then(response => {
          this.taskPositionList = response.records
          this.total = response.total
          this.listLoading = false
        })
      },
      // 列表排序
      sortChange(data) {
        const { prop, order } = data
        if (prop === 'createTime') {
          if (order === 'ascending') {
            this.taskPositionListQuery.ascs = 'createTime'
            this.taskPositionListQuery.descs = ''
          } else {
            this.taskPositionListQuery.ascs = ''
            this.taskPositionListQuery.descs = 'createTime'
          }
        }
        this.initTaskPositionList()
      },
      handleClick() {
        if (this.activeMember === 'first') {
          this.taskMemberStatus = true
        }
        if (this.activeMember === 'second') {
          this.taskMemberStatus = false
          this.initTaskPositionList()
        }
      },
      handleSearch() {
        this.taskPositionListQuery.currentPage = 1
        this.initTaskPositionList()
      },
      handleSizeChange(val) {
        this.taskPositionListQuery.size = val
        this.initTaskPositionList()
      },
      handleCurrentChange(val) {
        this.taskPositionListQuery.currentPage = val
        this.initTaskPositionList()
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      // 详情
      handleCreate() {
      },
      // 编辑
      handleDetails(row) {
        this.$router.push({ path: '/project/task/position-detail/index', query: { positionId: row.positionId, taskStatus: this.taskStatus, taskId: row.taskId }})
      },
      // 删除
      handleDelete(row) {
        this.$confirm('此操作将删除岗位, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteTaskPosition(row.positionId).then(response => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.initTaskPositionList()
          })
        }).catch(() => {
        })
      },
      // 更新任务状态
      handleUpdateStatus(row) {
      }
    },
    mounted() {
    }
  }
</script>
